
<script setup>
import { ref } from 'vue';
const navObj = [
	{
		id:1,
		name:'广场',
	},
	{
		id:2,
		name:'问答',
	},
	{
		id:3,
		name:'科普',
	}
]
const tapObj = [
	'推荐',
	'日常生活',
	'宠物穿搭',
	'护养分享',
	'搞笑可爱'
]
const setTap = ref(1)
const setTapInfo = ref(0)
const inputText = ref('')
const setClick= (id)=>{
	setTap.value = id
}	
const onInput = ()=>{
	console.log(inputText.value);
}
const setTapvalue = (index)=>{
	setTapInfo.value = index
}
</script>

<template>
	<view class="content">
		<view class="cirenav">
			<view 
			style="
			position: absolute;
			top: 50%;
			left: 0;
			width: 720rpx;
			border:1px solid black;
			"
			>
				
			</view>
			<view   v-for="item in navObj" :key="item.id" @click="setClick(item.id)" :class="{'nav-li':true, 'active':setTap === item.id}">
					<image v-show="item.id ===setTap" class="navimage"  src="../../static/circle/分组 15.png" mode=""></image>
				{{item.name}}
			</view>
			
		</view>
		
		<view class="search">
				<uni-easyinput v-model="inputText" @change="onInput"  primaryColor="" prefixIcon="search"  placeholder="输入你想要搜索的内容" ></uni-easyinput>
		</view>
		
	
			
		
			<scroll-view  class="text-center"  scroll-x="true" @scroll="scroll">
				<view v-for="(item,index) in tapObj":key='item' 
				class="scroll-v"
				@click="setTapvalue(index)"
				:class="{'tap-active':index===setTapInfo}"
				>{{item}}</view>
				
			</scroll-view>
				
				<view class="center-Info">
					
				</view>
	
	</view>
</template>


<style lang="scss" scoped>
	.active{
		background-color: #ffeb3b !important;
	}
	.tap-active{
		 background: linear-gradient(to top, #feea3a 40%, #fff2ba 30%); 
	}
.content{
	.cirenav{
		position:relative;
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		width: 690rpx;
		margin: 0 auto;
		.nav-li{
			position: relative;
			width: 128rpx;
			height: 70rpx;
			border: 2px solid black;
			border-radius: 10rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 36rpx;
			background-color: #fff;
			.navimage{
				position: absolute;
				top: -20rpx;
				left: 0;
				width: 40rpx;
				height: 24rpx;
			}
		}
	}
	.search{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		border: 2px solid black;
	}
	
	.text-center{
		margin-top: 30rpx;
	white-space: nowrap;
	width: 720rpx;
	margin-left: 30rpx;
	.scroll-v{
			display: inline-block;
			margin-left: 20rpx;
			padding: 0 5rpx;
	}
	.scroll-v:last-child{
		margin-right: 20rpx;
	}
	.scroll-v:first-child{
		margin-left: 0;
	}
	}
	.center-Info{
		width: 626rpx;
		height: 500rpx;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 30rpx;
		border: 2px solid black;
		padding: 30rpx;
	}
}
</style>
